<template>
	<view class="userinfo-warp">
		<u--form labelPosition="left" :model="formData" :rules="rules" ref="formData" labelWidth="50" labelAlign="right">
			<u-form-item label="昵称" prop="username" borderBottom ref="item1" >
				<u--input v-model="formData.nickname" border="none" clearable></u--input>
			</u-form-item>
			<view class="warp-login__but">
				<u-button type="error" text="保存" @click="onSubmit"></u-button>
			</view>
		</u--form>
	</view>
</template>

<script>
	import {setUserInfo} from '@/api/user.js'
	import { mapGetters } from 'vuex'
	export default {
		data() {
			return {
				formData:{
					nickname:'',
				},
				rules:{
					nickname: [
						{
							type: 'string',
							required: true,
							message: '请填写昵称',
							trigger: ['blur', 'change']
						}
					],
				}
			}
		},
		computed: {
			...mapGetters(['userInfo'])
		},
		onLoad(){
			this.formData.nickname = this.userInfo.nickname;
		},
		onReady(){
			this.$refs.formData.setRules(this.rules);
		},
		methods: {
			onSubmit(){
				this.$refs.formData.validate().then(item => {
					setUserInfo(this.formData).then(res=>{
						if(res.code === 200) {
							this.$store.dispatch('user/userInfo');
							uni.$u.toast(res.message);
						}else{
							uni.$u.toast(res.message);
						}
					});
					
				}).catch(errors => {
					uni.$u.toast('请认真填写必填字段！')
				})
			},
		}
	}
</script>

<style>
	.userinfo-warp {
		padding: 20rpx;
	}
	.warp-login__but{
		margin-top: 100rpx;
	}
</style>
